<template>
  <div class="bk flex1 flexC right_item_box">
    <p class="head_box font_s20  flex JustifyContentSA cursor">
      <span :class="{active:isActive===1}" @click="openurl(1)">智能发现</span>
      <span :class="{active:isActive===2}" @click="openurl(2)">客流眼</span>
      <span :class="{active:isActive===3}" @click="openurl(3)">日常发现</span>
      <span :class="{active:isActive===4}" @click="openurl(4)">年审反馈</span>
    </p>
    <znfx-item :dataList=znfxList :num=incompleteWarnNum :num2=totalWarnNum v-if="isActive===1" />
    <kly-item :dataList=znfxList v-if="isActive=== 2" />
    <znfx-item :dataList=rcfxList :num=incompleteWarnNum2 :num2=totalWarnNum2 v-if="isActive===3" />
    <nsfk-item v-if="isActive===4"
               :dataList=supervise3NumList
               :dataList2=supervise4NumList
               :dataList3=supervise5NumList />
  </div>
</template>

<script>
  import { queryWarnNumVo } from '@/api/home'
  import ZnfxItem from "./ZnfxItem";
  import KlyItem from "./KlyItem";
  import NsfkItem from "./NsfkItem";
  export default {
    name: "RightItem",
    components: {NsfkItem, KlyItem, ZnfxItem},
    data () {
      return {
        isActive: 1,
        znfxList: [],
        rcfxList: [],
        incompleteWarnNum: 0,
        totalWarnNum: 0,
        incompleteWarnNum2: 0,
        totalWarnNum2: 0,
        supervise3NumList: [],
        supervise4NumList: [],
        supervise5NumList: []
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      openurl (index) {
        this.isActive = index
      },
      getData () {
        queryWarnNumVo().then((response) => {
          if (response.data.status == 1) {
            this.znfxList = response.data.response.smartNumList
            this.rcfxList = response.data.response.superviseNumList
            this.incompleteWarnNum = response.data.response.smartDoingNum
            this.totalWarnNum = response.data.response.smartDoneNum
            this.incompleteWarnNum2 = response.data.response.superviseDoingNum
            this.totalWarnNum2 = response.data.response.superviseDoneNum
            /* supervise3NumList;//经营性公墓
            supervise4NumList;//经营性骨灰堂
            supervise5NumList;//殡仪馆 */
            this.supervise3NumList = response.data.response.supervise3NumList
            this.supervise4NumList = response.data.response.supervise4NumList
            this.supervise5NumList = response.data.response.supervise5NumList
          }
        }).catch((response) => {
          console.log(response)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.bk {
  background: url("~@/assets/img/zhjg/gray_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: .6rem .5rem .5rem .5rem;
  box-sizing: border-box;
}
.right_item_box {
  padding: .6rem .5rem .5rem .5rem;
  box-sizing: border-box;
  .head_box {
    height: 3.125rem;
    line-height: 3.125rem;
    background: #182D4E;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E1FDFF;
  }
  .active {
    width: 7.3125rem;
    height: 3.125rem;
    line-height: 3.215rem;
    background: url("~@/assets/img/zhjg/select_bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  .num_impact{
    font-family: Impact;
    font-weight: 400;
    color: #75FBFE;
    margin-right: .2rem;
  }

}
</style>